import { useState } from 'react';
import { Card, Pagination, Table, Field, Button, Icon, Form, Input } from '@alifd/next';
import TableEmptyBlock from '@/components/TableEmptyBlock';
import { FormattedDate, FormattedMessage } from 'react-intl';
import { useFusionTable } from 'ahooks';
import { userList, PData, ListVO, queryRoleList } from '../services';
import { TreeDataSource } from '@/pages/BaseManage/RoleManage/entity';
import EditDialog from './EditDialog';
import AuthorizeDialog from './AuthorizeDialog';
import { useRequest } from 'ice';
import Operation from './Operation';
import { EnableStatus } from '@/common/entity';

function List() {
  const field = Field.useField([{}]);
  const [visible, setVisible] = useState<boolean>(false);
  const [record, setRecord] = useState<ListVO>();
  const [authorizeVisible, setAuthorizeVisible] = useState<boolean>(false);
  const [roleId, setRoleId] = useState<number>();
  const { paginationProps, tableProps, search, error, refresh } = useFusionTable<PData, any>(userList, {
    field,
    debounceWait: 300,
    defaultType: 'simple',
  });
  const { submit } = search;

  const { data } = useRequest<any, TreeDataSource[]>(queryRoleList, {
    manual: false,
  });

  return (
    <Card.Content>
      <Form inline style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }} field={field}>
        <Form.Item label=" ">
          <Input
            name="keywords"
            placeholder="用户名/邮箱"
            style={{ minWidth: '300px' }}
            innerAfter={<Icon type="search" size="xs" onClick={submit} style={{ margin: 4 }} />}
            onChange={submit}
            onPressEnter={submit}
          />
        </Form.Item>
        <Form.Item label=" ">
          <Button type="primary" onClick={() => setVisible(true)}>
            <Icon type="add" /> 新增
          </Button>
        </Form.Item>
      </Form>
      <Table
        {...tableProps}
        isZebra
        emptyContent={<TableEmptyBlock error={error} onRefresh={refresh} />}
        primaryKey="id"
      >
        <Table.Column dataIndex="id" title="ID" asyncResizable />
        <Table.Column dataIndex="name" title="名称" asyncResizable />
        <Table.Column dataIndex="email" title="邮箱" asyncResizable />
        <Table.Column dataIndex="sellerId" title="卖家ID" asyncResizable />
        <Table.Column
          dataIndex="status"
          title="状态"
          asyncResizable
          cell={(v) => (v == EnableStatus.ENABLE ? '启用' : '禁用')}
        />
        <Table.Column
          dataIndex="createTime"
          title="创建时间"
          asyncResizable
          cell={(val) => <FormattedDate value={val} dateStyle="short" timeStyle="medium" hourCycle="h24" />}
        />
        <Table.Column
          dataIndex="shippingId"
          title="操作"
          cell={(val, i, row) => (
            <Operation
              row={row}
              onRefresh={refresh}
              onEdit={() => {
                setVisible(true);
                setRecord(row);
              }}
              onAuthorize={() => {
                setRoleId(row.id);
                setAuthorizeVisible(true);
              }}
            />
          )}
        />
      </Table>
      <Pagination
        style={{ marginTop: 16, textAlign: 'right' }}
        shape="arrow-only"
        totalRender={(total) => <FormattedMessage id="page.total" tagName="div" values={{ total }} />}
        {...paginationProps}
      />
      <EditDialog
        visible={visible}
        onRefresh={refresh}
        record={record}
        onClose={() => {
          setRecord(undefined);
          setVisible(false);
        }}
      />
      <AuthorizeDialog
        visible={authorizeVisible}
        onClose={() => {
          setRoleId(undefined);
          setAuthorizeVisible(false);
        }}
        treeData={data}
        userId={roleId}
      />
    </Card.Content>
  );
}

export default List;
